<!--回复顶部的信息栏-->
<script setup>
import FloorNumberTag from "@/components/common/infotag/FloorNumberTag.vue";
import FromClientTag from "@/components/common/infotag/FromClientTag.vue";
import LastEditTag from "@/components/common/infotag/LastEditTag.vue";
import ReplyStatusTag from "@/components/common/infotag/ReplyStatusTag.vue";
import PostLink from "@/components/common/link/PostLink.vue";
import ReadLink from "@/components/common/link/ReadLink.vue";
import UserSpeechLink from "@/components/common/link/UserSpeechLink.vue";
import {Setting} from "@element-plus/icons-vue";
import {formatDate} from "@ginstone/common-utils/dist/src/utils/DateUtils";
import {PostAction} from "@ginstone/nga-api/dist/src/enums/PostAction";
import {toRefs} from "vue";
import {useStore} from "vuex";
import {ReplyStatus, ReplyStatusEnum} from "@ginstone/nga-api/dist/src/enums/ReplyStatus";
import ScoreTag from "@/components/read/ScoreTag.vue";
import {setupMapGetters} from "@/assets/js/vuexUtils";
import {ElMessageBox} from "element-plus";
import {ReportParam} from "@ginstone/nga-api/dist/src/params/NukeParams";
import {NukeApi} from "@ginstone/nga-api/dist/src/method/NukeApi";
import {ElementUtils} from "@/assets/js/ElementUtils";
import FavorFolderPopover from "@/components/common/popover/FavorFolderPopover.vue";

const props = defineProps({
  data: {type: Object},
  topic: {type: Object},
  // 简洁模式
  simple: {type: Boolean},
})
const getClient = setupMapGetters("Account", ["getClient"]).getClient.value

const store = useStore();
// 开启提醒
const noticeEnable = () => store.dispatch("Notice/noticeEnable", {tid: data.value.topicId, pid: data.value.replyId, no_hint: 0,}).then(() => {
  data.value.status.removeStatus(ReplyStatusEnum.NO_HINT)
})
// 关闭提醒
const noticeDisable = () => store.dispatch("Notice/noticeEnable", {tid: data.value.topicId, pid: data.value.replyId, no_hint: 1,}).then(() => {
  data.value.status = data.value.status ? data.value.status : new ReplyStatus([], [])
  data.value.status.addStatus(ReplyStatusEnum.NO_HINT)
})
// 打开弹窗
const showDialog = (name, data) => store.commit("Dialog/showDialog", {name, data})
// 举报
const report = () => {
  ElMessageBox.prompt("冷却时间5分钟", "举报回复", {
    inputPlaceholder: '请输入举报理由',
  }).then(({value, action}) => {
    if (action === 'confirm') {
      NukeApi.report(getClient(), new ReportParam(data.value.topicId, data.value.replyId, value)).then(res => {
        ElementUtils.notice({message: res})
      }).catch(ElementUtils.exceptionHandler)
    }
  }).catch(r => {
    console.warn(r)
  })

}
const {data} = toRefs(props)

</script>

<template>
  <el-row v-if="data">
    <!--左侧信息显示-->
    <el-col :span="18" class="block" style="text-align: left">
      <!--楼层号-->
      <floor-number-tag :data="data" class="reply-info-tag"/>
      <!--赞踩-->
      <score-tag :pid="data.replyId" :score="data.agreeCount" :tid="data.topicId" @update="$event?data.agreeCount+=$event:undefined"/>
      <!--发布时间-->
      <el-tag v-if="data.postDatetime" class="reply-info-tag">{{ formatDate(data.postDatetime) }}</el-tag>
      <template v-if="!simple">
        <!--修改时间-->
        <last-edit-tag v-if="data.alterInfo && data.alterInfo.lastEdit" :data="data.alterInfo.lastEdit" class="reply-info-tag"/>
        <!--客户端-->
        <from-client-tag :client="data.fromClient" class="reply-info-tag"/>
        <!--回复状态-->
        <reply-status-tag v-if="data.status" :data="data.status"/>
      </template>
    </el-col>
    <!--右侧操作区-->
    <el-col :span="6" class="block" style="text-align: right">
      <div v-if="data.replyId!==undefined">
        <template v-if="!simple">
          <el-tag v-if="data.replyToId" class="clickable" size="small" type="warning" @click="showDialog('singleReply',data.replyToId)">回复目标</el-tag>
          <favor-folder-popover :pid="data.replyId" :tid="data.topicId">
            <el-tag class="clickable" size="small">收藏</el-tag>
          </favor-folder-popover>
          <el-tag class="clickable" size="small" @click="showDialog('post-form',{action:PostAction.REPLY,params:{tid:data.topicId,pid:data.replyId,comment:1}})">评论</el-tag>
          <el-tag class="clickable" size="small" @click="showDialog('post-form',{action:PostAction.QUOTE,params:{tid:data.topicId,pid:data.replyId}})">引用</el-tag>
          <el-tag class="clickable" size="small" @click="showDialog('post-form',{action:PostAction.REPLY,params:{tid:data.topicId,pid:data.replyId}})">回复</el-tag>
        </template>
        <el-tooltip effect="light" trigger="click">
          <el-tag size="small">
            <el-icon style="cursor: pointer">
              <Setting/>
            </el-icon>
          </el-tag>
          <template #content>
            <div>
              <el-divider content-position="left">@用户</el-divider>
              <read-link :author-id="data.authorUid" :page="1" :tid="data.topicId" class="ops-link">只看TA</read-link>
              <user-speech-link :user-id="data.authorUid" class="ops-link">用户主题</user-speech-link>
              <user-speech-link :user-id="data.authorUid" class="ops-link" search-reply>用户回复</user-speech-link>
              <template v-if="topic && topic.hasOwnProperty('forumId')">
                <user-speech-link :forum-id="topic.forumId" :user-id="data.authorUid" class="ops-link">本版主题</user-speech-link>
                <user-speech-link :forum-id="topic.forumId" :user-id="data.authorUid" class="ops-link" search-reply>本版回复</user-speech-link>
                <user-speech-link :forum-id="topic.forumId" :user-id="data.authorUid" class="ops-link" recommend>本版精华</user-speech-link>
              </template>
            </div>
            <div>
              <el-divider content-position="left">@回复</el-divider>
              <div>
                <post-link :action="PostAction.REPLY" :params="{tid:data.topicId,pid:data.replyId,comment:1}" class="ops-link">评论</post-link>
                <post-link :action="PostAction.QUOTE" :params="{tid:data.topicId,pid:data.replyId}" class="ops-link">引用</post-link>
                <post-link :action="PostAction.REPLY" :params="{tid:data.topicId,pid:data.replyId}" class="ops-link">回复</post-link>
                <post-link :action="PostAction.MODIFY" :params="{tid:data.topicId,pid:data.replyId}" class="ops-link">编辑</post-link>
                <read-link v-if="data.replyId" :pid="data.replyId" class="ops-link">只看这条</read-link>
                <!--开启和关闭提醒-->
                <el-link v-if="data.status && data.status.hasStatus(ReplyStatusEnum.NO_HINT)" class="ops-link" @click="noticeEnable">开启提醒</el-link>
                <el-link v-else class="ops-link" @click="noticeDisable">关闭提醒</el-link>
                <el-link class="ops-link" @click="report">举报</el-link>
                <el-link @click="showDialog('item_use',{topicId:data.topicId,replyId:data.replyId})">道具</el-link>
              </div>
              <div>

              </div>
            </div>
            <el-divider content-position="left">其他</el-divider>
            <el-link class="ops-link" @click="showDialog('bbsCode',data.content)">源码</el-link>
          </template>
        </el-tooltip>

      </div>
    </el-col>
  </el-row>

</template>

<style scoped>
.ops-link {
  margin-right: 3px;
}

.reply-info-tag {
  margin-right: 2px;
}

</style>